<script setup lang="ts">
/*
 * @description: 饼图基础组件
 * @fileName: dp-chart-pie-base.vue
 * @params
 * @author: lxx
 * @date: 2025-04-16 14:48:00"
 * @version: V1.0.0
 */
import { type ChartPropsInt, PieChart, type chartDataInt } from '@/hooks/useChart/charTypes'
import { ChartPropsDefault, getItemColor } from '@/hooks/useChart/charBase'
import { useChart } from '@/hooks/useChart/useChart'
const echartsRef = ref()
const emits = defineEmits(['chartClick'])
const props = withDefaults(defineProps<ChartPropsInt>(), ChartPropsDefault)
/**
 * TODO 直接取chartData[0] 后边可能需要兼容
 */

const options = {
  tooltip: {
    show: true,
    trigger: 'item'
  },
  xAxis: {
    show: false
  },
  yAxis: {
    show: false
  },
  legend: {
    show: true,
    right: '0',
    top: 'center',
    orient: 'vertical',
    textStyle: {
      color: '#000'
    }
  },
  series: [
    {
      type: PieChart,
      radius: ['40%', '60%'],
      center: ['40%', '50%'],
      itemStyle: {},
      label: {
        color: '#000',
        formatter: '{c}',
      },
      data: props?.customizeDataFun
        ? props.customizeDataFun(props.chartData)
        : (props.chartData as chartDataInt[]).map((item, index) => {
            return {
              ...item,
              itemStyle: {
                color: getItemColor(props.color, index)
              }
            }
          })
    }
  ]
}

useChart(echartsRef, props, options, emits)
</script>
<template>
  <div ref="echartsRef" :style="{ width: props.width, height: props.height }"></div>
</template>
<style>
/* 样式调整 */
</style>
